<template>
  <div class="box">
    <div class="top">
      <div class="top_item">
        <img :src="huohua" />
        <div>
          <countTo class="font_number" :startVal="0" :endVal="totalNum" :duration="3000"></countTo>
          <p>近年海葬业务办理统计</p>
        </div>
      </div>
    </div>
    <div class="mapChart" ref="mapChart"></div>
  </div>
</template>

<script>
import * as Api from "@/api/home";
import countTo from "vue-count-to";
import huohua from "@/assets/imgs/huohua.png";
import axios from 'axios'
export default {
  name: "homeCenterBottom",
  components: {
    countTo,
  },
  data() {
    return {
      huohua,
      totalNum: 0,
      chart: null,
      color: ["#2FC0FF", "#FF9C5D"],
    };
  },
  mounted() {
    // 初始化
    this.initChart();
    this.getData()
    window.addEventListener("resize", this.screenAdapter);
  },
  methods: {
    async getData() {
      let { data } = await this.$axios({
        method: 'post',
        url: `${this.baseUrl}?action=DeepSixCount`
      })
      if (data._issuccess !== 1) return this.$message.error(data._msg)
      let {newYear } = data._data
      let year = []
      let yearNum = []
      for(let item of newYear){
        year.unshift(item.Year)
        yearNum.unshift(item.YearNumber)
        this.totalNum+=Number(item.YearNumber)
      }
      this.updateChart(year,yearNum)
    },
    // 首页左上角柱状图
    initChart() {
      this.chart = this.$echarts.init(this.$refs.mapChart);
      let initOption = {
        tooltip: {
          trigger: "axis",
          formatter: "{b0}:{c0}",
          backgroundColor: "rgba(17,95,182,0.5)",
          textStyle: {
            color: "#fff",
            fontSize: '0.15rem'
          },
        },
        grid: {
          left: "7%",
          right: "2%",
          top: "15%",
          bottom: "13%",
        },
        xAxis: {
          type: "category",
          show: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#2D4377",
              opacity: 1,
            },
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#1DF9FC",
              fontSize: '0.15rem',
            },
            margin: 7, // 刻度标签与轴线之间的距离。
          },
        },
        yAxis: [
          {
            name: "单位：人",
            minInterval: 1,
            nameTextStyle: {
              align: "left",
              color: "#1DF9FC",
              padding: [0, 0, 0, -20],
              fontSize: '0.15rem',
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#2D4377",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#1DF9FC",
                fontSize: '0.15rem',
              },
            },
          },
        ],
        legend: {
          top: "2%",
          left: "80%",
          textStyle: {
            color: "#fff",
            fontSize: '0.2rem',
          },

          itemGap: 12, // 设置间距
        },
      };

      this.chart.setOption(initOption);
    },
    updateChart(year,yearNum) {
      const xAxisData = year
      // 所有省份对应的销售金额
      const yAxisData = yearNum
      const dataOption = {
        xAxis: {
          data: xAxisData,
        },
        series: [
          {
            // name: "海葬量",
            type: "bar",
            barWidth: 15,
            barGap: "-100%",
            data: yAxisData,
            showBackground: true,
            backgroundStyle: {
              // color: "rgba(110, 193, 244, 0.2)",
              color: "#012B46",
            },
            itemStyle: {
              // lenged文本
              opacity: 0.7,
              color: "#00AEFF",
              fontSize: '0.15rem'
            },
          }
        ],
      };
      this.chart.setOption(dataOption);
    },

    // 屏幕变化
    screenAdapter() {
      this.chart.resize();
    },
  },
  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  height: 5.075rem;
  padding: .25rem .25rem 0;
  box-sizing: border-box;
  background: url('../../assets/imgs/box-border.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .top {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .top_item {
      display: flex;
      width: 3.325rem;
      height: 1.175rem;
      background: url('../../assets/imgs/box.png') no-repeat;
      background-size: 100% 100%;
      justify-content: center;
      align-items: center;
      font-weight: 600;

      img {
        margin-right: 0.25rem;
        width: .675rem;
        height: .625rem;
      }

      .font_number {
        font-size: 0.45rem;
        color: #ff9c5d;
      }

      p {
        margin-top: 0.125rem;

        span {
          cursor: pointer;
          color: #ff9c5d;
        }
      }
    }

  }

  .mapChart {
    //height: 2.6rem;
    flex: 1;
  }





}
</style>
